<template>
  <div class="app-container">
    <upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload" />
    <el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
      <el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item" />
    </el-table>
  </div>
</template>

<script>
import UploadExcelComponent from '@/components/UploadExcel/index.vue' // 上传excel组件
import { importEmployeeAPI } from '@/api' // 批量导入数据接口
import { formatExcelDate } from './timeFormatter.js' // excel表格内时间的初始化
import formatter from './formatter.js' // 中英文名字枚举对象
export default {
  name: 'UploadExcel',
  components: { UploadExcelComponent },
  data() {
    return {
      tableData: [],
      tableHeader: []
    }
  },
  methods: {
    beforeUpload(file) {
      /*
        file -> 上传的文件对象(excel文件对象) -> size的单位是Byte
        知识点: 1Byte(字节) 计算机里保存一个 字母/数字 需要二进制位个数 (1Byte = 8bit)
        1KB = 1024B(字节)
        1MB = 1024KB
      */
      const isLt1M = file.size / 1024 / 1024 < 1

      if (isLt1M) {
        return true
      }

      this.$message(
         '文件不能大于1M',
         'warning'
      )
      return false
    },
    // 接收 uploadExcel组件内,读取表格成功的头部数据和表格内的数据
    async handleSuccess({ results, header }) {
      // results里,就是表格的所有数据
      // results是 数组嵌套对象,每一行的excel表格对象数据
       // header里,第一行(作为列标题字符串数组)
      this.tableData = results
      this.tableHeader = header

      // 注意: 我们不能直接把 results 发给后台
      // 原因: 后台要求传递的数据数组里对象(是英文的 key 名)
      // 解决: 不要去修改源码,前端做一个后置处理
      // xlsx读中文的对象数据, 拿到以后我们遍历做一个转换(映射)
      // 思路: 遍历出每个对象,把值取出来,添加到一个英文的新的对象里
      // 1 准备中文换英文的映射关系(枚举对象)
      // 2 遍历数组里每个对象,每遍历一次,产生一个英文 key 的新对象,想要收集成一个新数组
      let res = results.map(excelObj => {
        // 3 拿到excel对象里所有 key 名, 使用Object.keys(对象)方法 -> 返回对象里所有 key 字符串数组
        let objKey = Object.keys(excelObj)
        let newObj = {} // 新对象(最终需要 return 出去)
        objKey.forEach(zhKey => {
          // 4 遍历每个中文的 key 换成对应英文字符串
          const enKey = formatter.userRelations[zhKey] // 英文字符串 key
          // 5 为新对象,添加英文 key , 和对应的值
          if(enKey == 'timeOfEntry' || enKey == 'correctionTime'){
            newObj[enKey] = formatExcelDate(excelObj[zhKey]) // 格式化excel上传的时间,处理好后传给后台
            // console.log(formatExcelDate(excelObj[zhKey]))
            // console.log(new Date(formatExcelDate(excelObj[zhKey])))
          }else{
            newObj[enKey] = excelObj[zhKey]
          }
        })
        // 新对象上面 forEach 遍历很多次,新对象里有了很多英文 key + value,再返回这个处理好的英文对象到外面
        return newObj
      })
      await importEmployeeAPI(res)
      this.$message('批量导入员工成功')
      this.$router.replace('/employees')
    }
  }
}
</script>
